<script setup lang="ts">
import { useAppStore } from "@/store/modules/app";
const appStore = useAppStore();

import ColorRadioPicker from "./components/ColorRadioPicker.vue";
import { computed } from "vue";

// 头部相关
const headerTheme = computed(() => appStore.getTopHeaderBgColor);
const setHeaderTheme = (color: string) => {
  appStore.setTopHeaderBgColor(color);
};

// 侧边栏相关
const menuTheme = computed(() => appStore.getLeftMenuBgColor);
const setMenuTheme = (color: string) => {
  appStore.setLeftMenuBgColor(color);
};
</script>

<template>
  <div>
    <h1>主题设置</h1>
    <div>
      <ColorRadioPicker :model-value="headerTheme" @change="setHeaderTheme" />
    </div>
    <div>
      <ColorRadioPicker :model-value="menuTheme" @change="setMenuTheme" />
    </div>
  </div>
</template>

<style lang="less" scoped></style>
